<!--
 * @Description: 
 * @Autor: dongjunhua
 * @Date: 2021-01-20 09:16:50
 * @LastEditors: dongjunhua
 * @LastEditTime: 2021-09-04 10:06:25
-->
<template>
  <div class="workplace-container">
    <div class="user-info">
      <div class="user-info-header">用户中心</div>
      <el-row :gutter="20">
        <el-col class="user-info-box" :xs="24" :sm="14" :lg="14">
          <i class="fas fa-user-circle rotate"></i>
          <div class="user-info-text">
            <div class="user-info-text-top"><b>Admin</b>，早上好!</div>
            <div class="user-info-text-footer">
              软件开发部-前端开发工程师
            </div>
          </div>
        </el-col>
        <el-col class="user-info-box-right" :xs="24" :sm="10" :lg="10">
          <div class="user-info-item">
            <div class="user-info-item-text">项目数量</div>
            <div class="user-info-item-value">9</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user-info-item">
            <div class="user-info-item-text">已完成</div>
            <div class="user-info-item-value">3</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user-info-item">
            <div class="user-info-item-text">待办</div>
            <div class="user-info-item-value">6</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="16">
        <el-card class="box-card left" shadow="never">
          <template #header>
            <div class="card-header">
              <span>待办项目</span>
              <el-button class="button" link type="primary">所有项目</el-button>
            </div>
          </template>
          <el-row>
            <el-col
              dis
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
              class="card-body-item"
            >
              <div class="card-body-item-header">
                <el-avatar :size="25">
                  <i class="fas fa-image"></i>
                </el-avatar>
                <span>基础数据</span>
              </div>
              <div class="card-body-item-content">
                人员、部门、角色三元组信息、应用信息、配置信息管理
              </div>
              <div class="card-body-item-footer">
                <span>项目组：XXX</span>
                <span>负责人：XXX</span>
              </div>
            </el-col>
            <el-col
              dis
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
              class="card-body-item"
            >
              <div class="card-body-item-header">
                <el-avatar :size="25">
                  <i class="fas fa-image"></i>
                </el-avatar>
                <span>网上报销</span>
              </div>
              <div class="card-body-item-content">
                项目描述文字项目描述文字项目描述文字项目描述文字
              </div>
              <div class="card-body-item-footer">
                <span>项目组：XXX</span>
                <span>负责人：XXX</span>
              </div>
            </el-col>
            <el-col
              dis
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
              class="card-body-item"
            >
              <div class="card-body-item-header">
                <el-avatar :size="25">
                  <i class="fas fa-image"></i>
                </el-avatar>
                <span>基础数据</span>
              </div>
              <div class="card-body-item-content">
                人员、部门、角色三元组信息、应用信息、配置信息管理
              </div>
              <div class="card-body-item-footer">
                <span>项目组：XXX</span>
                <span>负责人：XXX</span>
              </div>
            </el-col>
            <el-col
              dis
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
              class="card-body-item"
            >
              <div class="card-body-item-header">
                <el-avatar :size="25">
                  <i class="fas fa-image"></i>
                </el-avatar>
                <span>基础数据</span>
              </div>
              <div class="card-body-item-content">
                人员、部门、角色三元组信息、应用信息、配置信息管理
              </div>
              <div class="card-body-item-footer">
                <span>项目组：XXX</span>
                <span>负责人：XXX</span>
              </div>
            </el-col>
            <el-col
              dis
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
              class="card-body-item"
            >
              <div class="card-body-item-header">
                <el-avatar :size="25">
                  <i class="fas fa-image"></i>
                </el-avatar>
                <span>基础数据</span>
              </div>
              <div class="card-body-item-content">
                人员、部门、角色三元组信息、应用信息、配置信息管理
              </div>
              <div class="card-body-item-footer">
                <span>项目组：XXX</span>
                <span>负责人：XXX</span>
              </div>
            </el-col>
            <el-col
              dis
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
              class="card-body-item"
            >
              <div class="card-body-item-header">
                <el-avatar :size="25">
                  <i class="fas fa-image"></i>
                </el-avatar>
                <span>基础数据</span>
              </div>
              <div class="card-body-item-content">
                人员、部门、角色三元组信息、应用信息、配置信息管理
              </div>
              <div class="card-body-item-footer">
                <span>项目组：XXX</span>
                <span>负责人：XXX</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card left" shadow="never">
          <template #header>
            <div class="card-header">
              <span>项目动态</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-content-item" v-for="i in 9" :key="i">
              <el-avatar :size="25">
                <i class="fas fa-image"></i>
              </el-avatar>
              <span>2021-09-0{{ i }}</span>
              <span>
                XXX&nbsp;提交项目至&nbsp;
                <el-button class="button" link type="primary">待审核</el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card class="box-card right" shadow="never">
          <template #header>
            <div class="card-header">
              <span>快捷入口</span>
            </div>
          </template>
          <el-button link type="primary">操作一</el-button>
          <el-button link type="primary">操作二</el-button>
          <el-button link type="primary">操作三</el-button>
        </el-card>
        <el-card class="box-card right" shadow="never">
          <template #header>
            <div class="card-header">
              <span>分布示例</span>
              <!-- <el-button class="button" link type="primary">所有项目</el-button> -->
            </div>
          </template>
          <div class="box-chart">
            <v-chart :option="option1" :autoresize="true" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue';
import { useStore } from 'vuex';
import { use } from 'echarts/core';
import { LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts'; // , { THEME_KEY }

use([LegendComponent, RadarChart, CanvasRenderer]);

export default {
  name: 'workplace',
  components: {
    VChart
  },
  // provide: {
  //   [THEME_KEY]: 'dark'
  // },
  setup() {
    const store = useStore();
    const device = computed(() => store.state.app.device);

    const data = reactive({
      option1: {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '基础数据', max: 6500 },
            { name: '网上报销', max: 16000 },
            { name: '流程中心', max: 30000 },
            { name: '消息中心', max: 38000 },
            { name: '薪资查询', max: 52000 }
          ]
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '预计'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '实际'
              }
            ]
          }
        ]
      }
    });

    return {
      ...toRefs(data),
      device
    };
  }
};
</script>

<style lang="scss" scoped>
.workplace-container {
  padding: 20px 20px 0 20px;
  background-color: #f0f2f5;
  .user-info {
    padding: 20px;
    margin: -20px -20px 20px -20px;
    color: rgba(0, 0, 0, 0.85);
    background-color: #ffffff;
    .user-info-header {
      font-weight: 600;
      font-size: 20px;
      line-height: 32px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }
    .user-info-box {
      i {
        font-size: 70px;
        color: #606266;
      }
      display: flex;
      .user-info-text {
        margin-left: 20px;
        .user-info-text-top {
          font-size: 20px;
          line-height: 40px;
        }
        .user-info-text-footer {
          font-size: 14px;
          line-height: 30px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .user-info-box-right {
      display: flex;
      justify-content: center;
      .user-info-item {
        padding: 20px 0 0;
        text-align: center;
        width: 130px;
        .user-info-item-text {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          margin-bottom: 4px;
        }
        .user-info-item-value {
          color: rgba(0, 0, 0, 0.85);
          font-size: 24px;
        }
      }
      ::v-deep(.el-divider--vertical) {
        height: 40px;
        margin: 24px 0px 0px;
      }
    }
  }
  .box-card {
    border: none;
    border-radius: 0px;
    margin-bottom: 20px;
    ::v-deep(.el-card__header) {
      border-bottom: 1px solid #f0f0f0;
      .card-header {
        button {
          float: right;
          position: relative;
          top: -5px;
          font-size: 14px;
        }
      }
    }
    &.left {
      overflow: visible;
      ::v-deep(.el-card__body) {
        padding: 0px;
        margin: -1px;
        .card-body-item {
          padding: 20px;
          border: 0;
          border-radius: 0;
          box-shadow: 1px 0 0 0 #f0f0f0, 0 1px 0 0 #f0f0f0, 1px 1px 0 0 #f0f0f0,
            inset 1px 0 0 0 #f0f0f0, inset 0 1px 0 0 #f0f0f0;
          transition: all 0.3s;
          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            cursor: pointer;
          }
          .card-body-item-header {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            i {
              font-size: 15px;
              width: 25px;
              line-height: 25px;
            }
            span {
              margin-right: 12px;
            }
          }
          .card-body-item-content {
            height: 44px;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            font-size: 14px;
            overflow: hidden;
          }
          .card-body-item-footer {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(0, 0, 0, 0.45);
            font-size: 12px;
            overflow: hidden;
          }
        }
      }
    }
    &.right {
      ::v-deep(.el-card__body) {
        padding: 0 10px;
        .el-button {
          font-size: 14px;
          margin: 15px;
        }
        .box-chart {
          height: 500px;
        }
      }
    }
    .card-content {
      padding: 20px;
      .card-content-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
          font-size: 14px;
          .el-button {
            font-size: 14px;
          }
        }
      }
      .card-content-item:last-child {
        margin-bottom: 0px;
        padding-bottom: 0px;
        border-bottom: 0px;
      }
    }
  }
  ::v-deep(.el-avatar) {
    background-color: #ebebeb;
    color: #646464;
  }
}
</style>
